import { getAppGlobalData } from "@/utils/globalAppDataUtil";

// components/page-content/page-content.ts
Component({
  options: {
    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    /**
     * 当前页面是否包含底部tab组件. 默认:true
     *
     * 当设置为false，则不计算底部导航条高度，也不计算底部安全区高度
     */
    hasBottomTab: {
      type: Boolean,
      value: true,
      observer() {
        wx.nextTick(() => {
          this.updateDispalyClass();
        });
      },
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    displayStyle: "",
    dispalyClass: "page-content-height",
  },
  lifetimes: {
    attached() {
      const { systemInfoMenuButtonRectInfo } = getAppGlobalData();
      const { topOccupiedHeight } = systemInfoMenuButtonRectInfo;
      const displayStyle = `--topOccupiedHeight:${topOccupiedHeight}px;position:relative;`;
      this.setData({
        displayStyle,
      });
      this.updateDispalyClass();
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    updateDispalyClass() {
      console.log("hasBottomTabHeight", this.properties.hasBottomTab);
      let dispalyClass = "page-content-height";
      if (!this.properties.hasBottomTab) {
        dispalyClass = "page-content-height-not-bottom-tab";
      }
      this.setData({ dispalyClass });
    },
  },
});
